<template>
    <!-- 顶层容器 -->
    <el-container class="index">
        <!-- 侧边容器 -->
        <el-aside class="M_aside" style=" height: 100vh" :width="aside_width">
            <!-- Note:整个菜单-->
            <el-menu :default-active="defaultActive" background-color="#545c64" active-text-color="#ffd04b"
                text-color="#fff" class="M_menu" :router="true" mode="vertical" :collapse="iscollapse"
                :unique-opened="true">

                <el-menu-item index="/dashBoard">
                    &nbsp
                    <el-icon size="1.2rem">
                        <Compass />
                    </el-icon>
                    <div class="menu_item_text">&nbsp仪表盘</div>
                </el-menu-item>

                <!-- Note:分级管理 -->
                <el-sub-menu index="/admin">
                    <template #title>
                        &nbsp
                        <el-icon size="1.2rem">
                            <UserFilled />
                        </el-icon>
                        <div class="menu_item_text">&nbsp{{ level }}</div>
                    </template>
                    <el-menu-item index="/category" v-if="Store.role==2?true:false" >
                        &nbsp
                        <el-icon size="1.2rem">
                            <Menu />
                        </el-icon>
                        <div class="menu_item_text"  >&nbsp分类管理</div>
                    </el-menu-item>
                    <el-menu-item index="/article">
                        &nbsp
                        <el-icon size="1.2rem">
                            <Document />
                        </el-icon>
                        <div class="menu_item_text">&nbsp博客管理</div>
                    </el-menu-item>

                    <el-menu-item index="/adminedit" v-if="Store.role==2?true:false" >
                        &nbsp
                        <el-icon size="1.2rem">
                            <Avatar />
                        </el-icon>
                        <div class="menu_item_text"  >&nbsp管理员管理</div>
                    </el-menu-item>

                    <el-menu-item index="/useredit">
                        &nbsp
                        <el-icon size="1.2rem">
                            <UserFilled />
                        </el-icon>
                        <div class="menu_item_text">&nbsp用户管理</div>
                    </el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="/tool">
                    <template #title>
                        &nbsp
                        <el-icon size="1.2rem">
                            <Tools />
                        </el-icon>
                        <div class="menu_item_text">&nbsp系统工具</div>
                    </template>
                </el-sub-menu>

                <el-menu-item index="/server">
                    &nbsp
                    <el-icon size="1.2rem">
                        <Cloudy />
                    </el-icon>
                    <div class="menu_item_text">&nbsp服务器状态</div>
                </el-menu-item>
            </el-menu>

        </el-aside>
        <!-- 次级容器 -->

        <el-container>
            <!-- 头部容器 -->
            <el-header height="3.75rem" class="M_header">

                <div class="header_left">
                    <el-icon @click="changeCollapse" :class="collapsAnimate" style="cursor: pointer;">
                        <DArrowLeft />
                    </el-icon>
                    <span style="cursor:default;position:relative">{{ item_info }}</span>
                </div>
                <div class="header_right">
                    <div class="toolbar">
                        <el-icon size="1.1rem" style="margin-right: 1.5rem;margin-top: .2rem;  cursor: pointer;"
                            @click="routeToHome">
                            <HomeFilled />
                        </el-icon>
                        <el-icon size="1.1rem" style="margin-right: 1.5rem;margin-top: .2rem;  cursor: pointer;"
                            @click="changeScreen">
                            <FullScreen />
                        </el-icon>

                        <el-dropdown>
                            <el-icon size="1.1rem" style="margin-right: 1.5rem;margin-top: .2rem;  cursor: pointer;">
                                <Setting />
                            </el-icon>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="logout">注销</el-dropdown-item>
                                    <el-dropdown-item @click="black">退出</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <span style="cursor:default">{{ Store.$state.adminname }}</span>
                    </div>
                </div>

            </el-header>
            <!-- 主要显示区域 -->
            <el-scrollbar>
                <el-main class="M_main" v-loading="loading" style="overflow-x:hidden">
                    <!-- 组件如果使用了顶层await需要声明<suspense>来包裹异步组件 -->
                    <suspense>
                        <RouterView></RouterView>
                    </suspense>
                </el-main>
            </el-scrollbar>
        </el-container>
    </el-container>
</template>



<script setup lang="ts">
const router = useRouter()
const route = useRoute()
const global = getCurrentInstance()
//@ts-ignore
import { useCounterStore } from '../stores/counter'
//@ts-ignore    
import { storeToRefs } from 'pinia'
//Flag:pinia使用
let Store = useCounterStore()

//Flag:转到主页
const routeToHome = () => {
    router.push('/main')
}

//Flag:全局loading显示
let { isloading } = storeToRefs(Store)
let loading = isloading




//Flag:level权鉴
const level = ref<string>('')
function showLevel() {
    switch (Store.role) {
        case '2':
            level.value = '超级管理员'
            break;
        default:
            level.value = '普通管理员'
    }
}; showLevel()


//Flag:iteminfo
let item_info = computed(() => {
    //@ts-ignore
    return iteminfo[route.name]
})
let iteminfo = {
    dashBoard: '仪表盘',
    server: '服务器状态',
    category: `分类管理`,
    article: '博客管理',
    articleadd: '博客添加',
    editarticle: '博客编辑',
}
//@ts-ignore
let defaultActive = ref<string>('/' + route.name)
//Flag:退出与注销
const black = () => {
    router.replace('/')
}
const logout = () => {
    router.replace('/')
    sessionStorage.clear()
    Store.$reset()
}

//Flag:全屏
const changeScreen = () => {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen()
    } else {
        document.exitFullscreen()
    }
}

//Flag:折叠栏
let aside_width = ref<string>('233px')
let collapsAnimate = ref<string>('')
let iscollapse = ref<boolean>(false)
const changeCollapse = () => {
    if (iscollapse.value) {
        aside_width.value = '233px'
        collapsAnimate.value = 'collapsesAnimateA'
    } else {
        aside_width.value = '64px'
        collapsAnimate.value = 'collapsesAnimateB'
    }

    iscollapse.value = !iscollapse.value

}

//Flag:状态管理动态路由
let routeview = ref<boolean>()
if (Store.role == 2) {
    routeview.value = true
    //添加的路由:
    //1.管理员管理
    //2.分类管理
    //3.博客删除
//如果添加的是嵌套路由,参数第一个是父级路由名称
    router.addRoute('main',{
        path: '/adminedit',
        name: 'adminedit',
        component: () => import('../views/peopleedit/admin.vue')
    },)
    router.addRoute('main',{
        path: '/category',
        name: 'category',
        component: () => import('../views/category/category.vue')
    },)
}







</script>



<style scoped lang="scss">
:global(.el-scrollbar) {
    background-color: rgb(240, 242, 245)
}

.index {

    max-height: 100vh;
    max-width: 100vw;
}

.M_aside {
    background-color: rgb(84, 92, 100);
    transition-duration: 0.33s;
    overflow: hidden;

    .M_menu {
        min-height: 100vh;
        padding-top: 1rem;
    }

    .M_menu:not(.el-menu--collapse) {
        width: 233px;
    }
}

.M_header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-left: 1rem;
    margin-right: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .header_left {
        display: flex;
        align-items: center;
        font-size: 1.5rem;

        span {
            font-size: 1.9rem;
            font-weight: 600;
            font-family: 'kaiti';
            padding-left: 1rem
        }
    }
}

.M_main {
    padding-left: 2rem;
    padding-top: 2rem;
}

.toolbar {
    display: flex;
    align-items: center;
}

.collapses {
    width: 4rem !important;
    overflow: hidden;
}

.menu_item_text {
    padding-left: 1rem;
}

.collapsesAnimate {
    transition-duration: 0.54s;
    transform: rotate(180deg);
}

.collapsesAnimateB {
    transition-duration: 0.54s;
    transform: rotate(180deg);
}
</style>